<template>
  <div class="datalist">
    <h2 class="datalist_title">mongoDB 数据列表</h2>
    <div class="datalist_content">
      <div class="datalist_table">
        <el-button size="small" @click="createData">新建数据</el-button>
        <div class="datalist_table_search">
          <el-form
            :inline="true"
            :model="formInline"
            ref="demo-form-inline"
            :rules="rules"
            class="demo-form-inline"
          >
            <el-form-item label="标题" prop="title">
              <el-input
                v-model="formInline.title"
                placeholder="标题"
                @keydown.native.enter="onSubmit('demo-form-inline')"
              ></el-input>
            </el-form-item>
            <el-form-item label="简述" prop="message">
              <el-input
                v-model="formInline.message"
                placeholder="简述"
                @keydown.native.enter="onSubmit('demo-form-inline')"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit('demo-form-inline')"
                >查询</el-button
              >
            </el-form-item>
          </el-form>
        </div>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text" size="mini" @click="showDetail(scope.row)"
                >查看详情</el-button
              >
              <el-button type="text" size="mini" @click="listUpData(scope.row)"
                >编辑</el-button
              >
              <el-button type="text" size="mini" @click="ListDelete(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
          <el-table-column
            prop="title"
            label="标题"
            width="300"
          ></el-table-column>
          <el-table-column
            prop="image"
            label="图片地址"
            width="500"
          ></el-table-column>
          <el-table-column prop="message" label="简述"></el-table-column>
          <el-table-column
            prop="createTime"
            label="时间"
            width="200"
          ></el-table-column>
        </el-table>
      </div>
      <div class="datalist_pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[5, 10, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { findList, deleteData } from "../api/api_type";
export default {
  data() {
    return {
      tableData: [],
      pageSize: 10,
      pageNum: 1,
      total: 0,
      formInline: {
        title: "",
        message: "",
      },
      rules: {
        title: [{ max: 20, message: "不可超过20个字符", trigger: "change" }],
        message: [{ max: 40, message: "不可超过40个字符", trigger: "change" }],
      },
    };
  },
  methods: {
    /* 编辑 */
    listUpData(row) {
      this.$router.push({
        name: "Home",
        params: {
          id: row,
          upData: true,
        },
      });
    },
    /* 删除 */
    ListDelete(row) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "删除提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteData({ id: row._id }).then((res) => {
            var resp = res.data,
              type;
            if (resp.code == 200) {
              type = "success";
              this.getList(false);
            } else {
              type = "error";
            }
            this.$message({
              type,
              message: resp.msg,
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    /* 查询提交 */
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var searchData = {
            title: this.formInline.title,
            message: this.formInline.message,
          };
          this.getList(searchData);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    /* 查看详情 */
    showDetail(row) {
      this.$router.push({
        name: "Home",
        params: {
          id: row,
          isDetail: true,
        },
      });
    },
    /* 分页 */
    handleSizeChange(val) {
      this.pageSize = val;
      this.getList(false);
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getList(false);
    },
    /* 创建数据 */
    createData() {
      this.$router.push("/Home");
    },
    getList(type) {
      var dataOption = null;
      if (!type) {
        dataOption = {};
      } else {
        dataOption = type;
      }
      findList({
        ...dataOption,
        pageSize: this.pageSize,
        pageNum: this.pageNum,
      }).then((res) => {
        var resp = res.data,
          type;
        if (resp.code == 200) {
          this.tableData = resp.data;
          let { pageSize, pageNum, total } = resp.pageInfo;
          this.pageSize = pageSize;
          this.pageNum = pageNum;
          this.total = total;
        } else {
          type = "error";
          this.$message({
            type,
            message: resp.msg,
          });
        }
      });
    },
  },
  created() {
    this.getList(false);
  },
};
</script>

<style lang="scss">
.datalist {
  width: 100vw;
  height: 100vh;
  background: rgb(245, 244, 244);
  overflow-y: auto;
  .datalist_title {
    text-align: center;
    padding: 15px 0;
    width: 95%;
    background: white;
    margin: 0 auto;
    margin-top: 20px;
    border-radius: 5px;
  }
  .datalist_content {
    padding: 15px 0;
    width: 95%;
    background: white;
    margin: 0 auto;
    margin-top: 20px;
    border-radius: 5px;
    > div {
      width: 95%;
      margin: 0 auto;
      padding: 10px 0;
    }
    .datalist_table {
      .el-table {
        .cell {
          text-align: center !important;
        }
      }
    }
    .datalist_table_search {
      width: 50%;
      margin: 0 auto;
    }
  }
}
</style>